<template>
	<view :class="'navTabBox' + navType">
		<view class="longTab">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" :scroll-with-animation="true" :scroll-left="tabClick > 2 ? leftList[tabClick - 2] : 0">
				<view
					class="longItem"
					:data-index="index"
					:class="index === tabClick ? 'click' : ''"
					v-for="(item, index) in tabTitle"
					:key="index"
					:id="'id' + index"
					@click="longClick(index)"
				>
					{{ item.classifyName ? item.classifyName : item }}
				</view>
				<view class="underlineBox" :style="'transform:translateX(' + isLeft + 'px);width:' + isWidth + 'px'"><view class="underline"></view></view>
				<view v-if="navType == 5" style="height: 10rpx;"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'navTab',
	props: {
		initIndex: {
			type: Number,
			default: 0
		},
		tabTitle: {
			type: Array,
			default: []
		},
		navType: {
			type: Number,
			default: 0
		},
		tabIndexChange: {
			type: String | Number,
			default: ''
		}
	},
	data() {
		return {
			tabClick: 0, //导航栏被点击
			isLeft: 0, //导航栏下划线位置
			isWidth: 0, //每个导航栏占位
			leftList: [],
			widthList: []
		};
	},
	watch: {
		tabIndexChange(newVal) {
			if(newVal) {
				this.longClick(newVal)
			}
		}
	},
	mounted() {
		this.initNav();
	},
	methods: {
		initNav() {
			if (this.tabTitle.length == 0) return;
			const query = this.createSelectorQuery(this);
			query
				.selectAll('.longItem')
				.boundingClientRect(res => {
					console.log('initNav', res);
					let leftList = [];
					let tabWidth = [];
					for (let i = 0; i < res.length; i++) {
						leftList.push(res[i]['left']);
						tabWidth.push(res[i]['width']);
					}
					this.leftList = leftList;
					this.widthList = tabWidth;
					if (this.initIndex) this.longClick(this.initIndex);
				})
				.exec();
		},
		// 导航栏点击
		longClick(index) {
			this.tabClick = index; //设置导航点击了哪一个
			this.isLeft = this.leftList[index]; //设置下划线位置
			this.isWidth = this.widthList[index];
			this.$emit('changeTab', index); //设置swiper的第几页
			// this.$parent.currentTab = index //设置swiper的第几页
		}
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.navTabBox0 {
	width: 100vw;
	color: rgba(255, 255, 255, 0.5);
	.click {
		color: #ff7200 !important;
	}
	.longTab {
		width: 100%;
		.longItem {
			color: #909499;
			padding: 0 10rpx;
			font-size: 32rpx;
			height: 64rpx;
			display: inline-block;
			line-height: 64rpx;
			text-align: center;
		}
		.underlineBox {
			height: 3px;
			width: 20%;
			display: flex;
			align-content: center;
			justify-content: center;
			z-index: 10;
			position: relative;
			transition: 0.5s;
			.underline {
				width: 84rpx;
				height: 4px;
				background-color: #ff7200;
			}
		}
	}
}
.navTabBox3 {
	width: 100vw;
	.click {
		font-weight: bold;
		color: #333333 !important;
		font-size: 34rpx !important;
	}
	.longTab {
		width: 100%;
		.longItem {
			min-width: 33.3vw;
			color: #909499;
			font-size: 30rpx;
			position: relative;
			z-index: 11;
			height: 74rpx;
			display: inline-block;
			line-height: 74rpx;
			text-align: center;
		}
		.underlineBox {
			height: 3px;
			min-width: 33.3vw;
			display: flex;
			z-index: 9;
			position: relative;
			align-content: center;
			justify-content: center;
			transition: 0.5s;
			.underline {
				width: 150rpx;
				height: 25rpx;
				opacity: 0.45;
				position: absolute;
				bottom: 20rpx;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #fc6f9a;
			}
		}
	}
}

.navTabBox4 {
	width: 100vw;
	background-color: #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: center;
	.click {
		font-weight: bold;
		color: #f66e8e !important;
		font-size: 28rpx !important;
	}
	.longTab {
		width: 91%;
		margin: auto;
		.longItem {
			padding: 0 10rpx;
			color: #999999;
			font-size: 28rpx;
			height: 64rpx;
			display: inline-block;
			line-height: 74rpx;
			text-align: left;
		}
		.underlineBox {
			height: 0;
			display: flex;
			position: relative;
			align-content: center;
			justify-content: center;
			// transition: .5s;
			.underline {
				height: 0;
				opacity: 0.45;
				position: absolute;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #fc6f9a;
			}
		}
	}
}

.navTabBox5 {
	width: 100vw;
	.click {
		font-weight: bold;
		color: #FB4B06 !important;
		font-size: 30rpx !important;
		border: 1rpx solid #F9973C !important;
	}
	.longTab {
		width: 100%;
		.longItem {
			width: 187rpx;
			height: 55rpx;
			line-height: 55rpx;
			margin-left: 2vw;
			color: #999999;
			border-radius: 55rpx;
			font-size: 30rpx;
			position: relative;
			border: 1rpx solid #999999;
			z-index: 11;
			display: inline-block;
			text-align: center;
		}
	}
}

.navTabBox6 {
	width: 100vw;
	// #ifdef MP-KUAISHOU
	background: #2C2D31;
	// #endif
	// #ifdef MP-TOUTIAO
	background: #38364B;
	// #endif
	display: flex;
	align-items: center;
	justify-content: center;
	.click {
		font-weight: bold;
		color: #FFFFFF !important;
		font-size: 28rpx !important;
	}
	.longTab {
		width: 91%;
		margin: auto;
		.longItem {
			padding: 0 10rpx;
			color: #999999;
			font-size: 28rpx;
			height: 64rpx;
			display: inline-block;
			line-height: 64rpx;
			text-align: left;
		}
		.underlineBox {
			height: 0;
			display: flex;
			position: relative;
			align-content: center;
			justify-content: center;
			// transition: .5s;
			.underline {
				height: 0;
				opacity: 0.45;
				position: absolute;
				bottom: 10rpx;
				left: 0;
				right: 0;
				margin: auto;
				background-color: #fc6f9a;
			}
		}
	}
}
</style>
